<template>
  <div>
    <Tabs :tabs="tabs" @tabsItemChange="onTabsItemChange">
  <!-- 插槽 -->
  <block v-if="tabs[0].isActive">
    <view class="order_wrap">
      <view class="order_item">
        <view class="order_num order_row">
          <view class="left">订单编号</view>
          <view class="right">66666666666666666666</view>
        </view>
        <view class="order_price order_row">
          <view class="left">订单价格</view>
          <view class="right price">6666</view>
        </view>
        <view class="order_date order_row">
          <view class="left">订单日期</view>
          <view class="right">2020/02/22 下午18:00:00</view>
        </view>
      </view>
    </view>
  </block>
  <block v-if="tabs[1].isActive">2</block>
  <block v-if="tabs[2].isActive">3</block>
  <block v-if="tabs[3].isActive">4</block>
</Tabs>
  </div>
</template>

<script>
import Tabs from '@/components/tabs'
export default {
  data() {
    return {
      tabs: [
        {id: 0,value: "全部订单",isActive: true},
        {id: 1,value: "待付款",isActive: false},
        {id: 2,value: "待发货",isActive: false},
        {id: 3,value: "退货/退款",isActive: false}],
    }
  },
  //options(Object)
  onLoad: function (options) {
    console.log(options)
    const { type } = options
    this.tabs.forEach((v, i) => {
      i === type - 1 ? v.isActive = true : v.isActive = false
    })
  },
  onTabsItemChange(index) {
    this.tabs.forEach((v, i) => {
      i === index ? v.isActive = true : v.isActive = false
    })
  }
}
</script>

<style lang='less' scope>
.order_wrap {
  .order_item {
    padding: 20rpx;

    .order_row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 0;

      .left {
        flex: 2;
      }

      .right {
        flex: 5;
        text-align: right;
      }
      .price{
        color: var(--themeColor);
        font-size: 32rpx;
        font-weight: 600;
      }
    }
  }
}
</style>